<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset='utf-8'/>
	<title>lesson1_复习</title>
</head>
<body>
<button class="btn1">发送原生请求</button>
<button class="btn2">发送jqAjax请求</button>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
	// 01复习jq框架中ajax与原生ajax

	//原生ajax请求--xmlhttprequest
	document.querySelector('.btn1').onclick = function (){
		var xhr = new XMLHttpRequest();
		xhr.onreadystatechange = function (){
			if(xhr.readyState == 4){
				if(xhr.status == 200){
					console.log(JSON.parse(xhr.responseText));
				}
			}
		};
		var formData = new FormData();
		formData.append('uname','frank');
		formData.append('upass','123456');

		xhr.open('post', '01reivew.php', true);
		xhr.send(formData);
	};

	document.querySelector('.btn2').onclick = function (){
		$.ajax({
			type: 'post',
			url: '01reivew.php',
			dataType: 'json',
			data: {
				username:'jq-frank',
				password:'jq-123456'
			},
			success: function (res){
				console.log(res);
			}
		});
	};

	//构建自己的ajax框架，
	//约定1：参数模仿jq的格式，也是一个json
	//       json中必要字段有：
	//       type请求类型、url请求地址、data请求参数、success请求回调
	// function frankAjax(paramsObj){
	// 	(1)先处理paramsObj参数，把这个json格式的参数转换成必要的格式
	// 	  a.如果是get请求，将参数拼接到url后面
	// 	      {...}->[...]->join()->url+join()
	// 	  b.如果是post请求，则构建formData参数对象
	// 	      formData.append(..., ...);

	// 	(2)准备xhr对象，然后实现onreadystatechange，准备发送请求
	// 	   xhr.onreadystatechange = function (){...};

	// 	(3)准备open()
	// 	   xhr.open(..., ..., true);

	// 	(4)准备send()
	// 	   if(paramsObj.type == 'get'){  xhr.send(null);  }
	// 	   else if(paramsObj.type == 'post'){  xhr.send(formData);  }
	// }


</script>
</body>
</html>